import React, { memo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import type { ReactNode, FC } from "react";
import axios from "axios";
import { message } from "antd";
interface IProps {
  children?: ReactNode;
}
const Login: FC<IProps> = () => {
  const [inputs, setInputs] = useState({
    username: "",
    password: ""
  });
  const [err, setError] = useState(null);

  const navigate = useNavigate();

  const handleChange = (e: any) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    const res: any = await axios.get(
      `/users?username=${inputs.username}&password=${inputs.password}`
    );
    console.log(res);

    if (res.status === 200) {
      message.success("登陆成功！");
    } else {
      message.error("账号或密码错误");
    }
  };
  return (
    <div className="auth">
      <h1>Login</h1>
      <form>
        <input
          required
          type="text"
          placeholder="username"
          name="username"
          onChange={handleChange}
        />
        <input
          required
          type="password"
          placeholder="password"
          name="password"
          onChange={handleChange}
        />
        <button onClick={handleSubmit}>Login</button>
        {err && <p>{err}</p>}
        <span>
          Don't you have an account? <Link to="/register">Register</Link>
        </span>
      </form>
    </div>
  );
};
export default memo(Login);
